import React, { Component } from 'react';
import styles from './index.less';

class Modal extends Component {
  /**
   * 拦截点击，做一层处理
   * @param action 具体的点击回调
   */
  handleClick(action) {
    // TODO
    // 点击处理前，可以做一些处理

    !!action && action();
  }

  render() {
    const { title, content, btnGrp, data } = this.props;

    return (
      <div className={styles.modal}>
        <div className={styles.main}>
          <div className={styles.title}>
            <img
              className={styles.iconTitleLabel}
              src="http://assert.yuyuetui.com/static/icon-title-label.png"
              alt="icon-title-label"
            />
            <div className={styles.text}>{title}</div>
            <img
              className={styles.iconTitleLabel}
              src="http://assert.yuyuetui.com/static/icon-title-label.png"
              alt="icon-title-label"
            />
          </div>
          {content(data)}
          <div className={styles.btnGrp}>
            {btnGrp.map((item, index) => {
              return (
                <div
                  key={index}
                  className={
                    btnGrp.length > 1 ? styles['twoBtn'] : styles['oneBtn']
                  }
                  onClick={this.handleClick.bind(this, item.action)}
                >
                  {item.text}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}

export default Modal;
